@keyframes pulse {
  0% {
    transform: scale(1);
    border-color: #c31616;
  }

  100% {
    transform: scale(1.2);
    border-color: transparent;
  }
}

@keyframes gelatine {
  from,
  to {
    transform: scale(1, 1);
  }

  25% {
    transform: scale(0.9, 1.1);
  }

  50% {
    transform: scale(1.1, 0.9);
  }

  75% {
    transform: scale(0.95, 1.05);
  }
}

@keyframes bounce-up {
  0% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }

  50% {
    transform: translateY(-100px);
    animation-timing-function: ease-in;
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes flip {
  0% {
    transform: perspective(400px) rotateY(0);
    animation-timing-function: ease-out;
  }

  40% {
    transform: perspective(400px) translateZ(150px) rotateY(170deg);
    animation-timing-function: ease-out;
  }

  50% {
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    animation-timing-function: ease-in;
  }

  80% {
    transform: perspective(400px) rotateY(360deg) scale(0.95);
    animation-timing-function: ease-in;
  }

  100% {
    transform: perspective(400px) scale(1);
    animation-timing-function: ease-in;
  }
}

.home {
  padding: 56px 24px 48px;
  position: relative;
  height: 100vh;
  background-color: #fff;
  background-image: url("../../assets/svgs/home.svg");
  transform: translateZ(0);

  .content {
    display: flex;
    justify-content: center;
    max-width: 1400px;
    height: 100%;
    margin: 0 auto;

    .intro {
      padding-left: 28px;
      padding-top: 8vh;

      .paragraph {
        display: flex;
        align-items: center;
        white-space: nowrap;

        span,
        i {
          white-space: nowrap;
        }
      }

      .tencent {
        color: #0052d9;
      }

      .workParagraph {
        display: flex;
        flex-wrap: wrap;

        & > p {
          flex-shrink: 0;
        }
      }

      // 字节
      .zijie {
        font-weight: bold;
        color: #0674f0;
      }

      // 跳
      .tiao {
        font-weight: bold;
        color: #06cbc4;
        animation: bounce-up 800ms infinite;
      }

      // 动
      .dong {
        font-weight: bold;
        color: #06cbc4;
        animation: gelatine 800ms infinite;
      }

      .capcut {
        color: #000;

        &:hover {
          text-decoration: underline;
        }
      }

      .react {
        font-style: bold;
        color: #61dafb;
      }

      .sometime {
        // typed.js 的光标样式
        & + span {
          color: #bd0000 !important;
        }
      }

      .del {
        position: relative;

        &::before,
        &::after {
          content: "";
          background: #bd0000;
          width: 120%;
          height: 6px;
          position: absolute;
        }

        &::before {
          left: -10%;
          top: 40%;
        }

        &::after {
          left: -10%;
          bottom: 30%;
        }
      }

      p {
        letter-spacing: 2px;
        text-align: left;
        font-size: 62px;
        font-weight: 600;
        color: #002245;
        line-height: 1.5;
      }
    }

    .ballWrapper {
      padding: 12px 12px 12px 50px;
      display: flex;
      align-items: center;
      justify-content: center;

      .ball {
        position: relative;
        width: 340px;
        height: 340px;
        background: #c31616;
        border-radius: 50%;
        opacity: 0;
        transition: all 0.3s;

        div {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          overflow: hidden;
        }

        &::before {
          content: "";
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          width: 100%;
          height: 100%;
          animation: pulse 2s cubic-bezier(0.57, 0.06, 0.27, 0.84) infinite;
          border: 4px solid #c31616;
          border-radius: 50%;
          background: transparent;
          z-index: 1;
        }
      }
    }

    .next {
      display: flex;
      align-items: center;
      justify-content: center;

      .handDown {
        > div {
          position: relative;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          height: 100px;
          width: 100px;
          color: #ff771e;
          cursor: pointer;

          &::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            border-radius: 50%;
            transform: scale(0);
            transition: all 0.3s;
          }

          &:hover {
            &::after {
              background-color: rgb(255 0 198 / 11%);
              transform: scale(1.1);
            }
          }
        }
      }
    }
  }

  @media screen and (max-width: 992px) {
    .content {
      .intro {
        padding-top: 4vh;

        p {
          font-size: 2em;
        }

        .del {
          &::before,
          &::after {
            top: 50%;
          }
        }
      }

      .ballWrapper {
        padding: 0;

        .ball {
          height: 200px;
          width: 200px;
          font-size: 5em;
        }
      }
    }
  }

  @media screen and (max-width: 768px) {
    .content {
      .intro {
        padding-left: 0;
        padding-top: 10px;

        p {
          line-height: 1.4em;
          font-size: 1.7em;
        }

        .del {
          &::before,
          &::after {
            top: 50%;
          }
        }
      }
    }
  }
}
